{% extends "links/base.html" %}
{% load profile %}
{% load staticfiles %}

{% block title %}
Links summary
{% endblock %}


{% block breadcrumb %}
<li><a href="{% url "home" %}">Home</a></li>
<li class="current">Links</li>
{% endblock %}

{% block content %}
<div class="row">
  <div class="small-4 columns">
    <h1>Links</h1>
  </div>
  <div class="small-8 columns clearfix header-buttons">
    <a href="{% url "new-link" %}" class="button small right">
      <i class="fi-plus"></i>
      Add a link
    </a>
  </div>
</div>
<div class="row">
  <div class="medium-6 large-6 columns">
    <h3>Latest</h3>
    <ul class="no-bullet">
      {% for link in latest %}
      <li{% if forloop.counter > 10 %} class="hide-for-small"{% endif %}><i class="fi-link"></i><span class="votes y-bg" data-type="link" data-id="{{link.link__pk}}"><span class="votes-count"> {{ link.count }} </span><i class="fi-check{% if link.link__pk in upvoted_pk %}box{% endif %}"></i></span><a href="{% url "link-single-slug" link.link__pk link.link__slug %}">{{ link.link__title }}</a><hr></li>
      {% endfor %}
    </ul>
  </div>
  <div class="medium-6 large-6 columns">
    <div>
      <h3>Hottest</h3>
      <ul class="no-bullet">
        {% for link in hottest %}
        <li{% if forloop.counter > 5 %} class="hide-for-small"{% endif %}><i class="fi-link"></i><span class="votes y-bg" data-type="link" data-id="{{link.link__pk}}"><span class="votes-count"> {{ link.count }} </span><i class="fi-check{% if link.link__pk in upvoted_pk %}box{% endif %}"></i></span><a href="{% url "link-single-slug" link.link__pk link.link__slug %}">{{ link.link__title }}</a></li>
        <hr>
        {% endfor %}
      </ul>
    </div>
    <div>
      <h3>Most appreciated</h3>
      <ul class="no-bullet">
        {% for link in most_voted %}
        <li{% if forloop.counter > 5 %} class="hide-for-small"{% endif %}><i class="fi-link"></i><span class="votes y-bg" data-type="link" data-id="{{link.link__pk}}"><span class="votes-count"> {{ link.count }} </span><i class="fi-check{% if link.link__pk in upvoted_pk %}box{% endif %}"></i></span><a href="{% url "link-single-slug" link.link__pk link.link__slug %}">{{ link.link__title }}</a></li>
        <hr>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>


<div class="row">
  <div class="large-12 columns panel hide-for-small">
    <h6>Legend</h6>
    <ul class="no-bullet inline-list">
      <li><a href="#"><i class="fi-link" style="color:black"></i> I'm a link</a></li>
      <li><a href="#"><i class="fi-link" style="color:black"></i> <span class="votes y-bg" data-tooltip title="Click to upvote">17 <i class="fi-check"></i></span>I'm a link with 17 votes</a></li>
    </ul>

    <p><strong>Hottest</strong> are the most upvoted links lately</p>
    <p><strong>Most appreciated</strong> are the most upvoted links all time</p>
  </div>
</div>
{% endblock %}


{% block last_body %}
{% if user.is_authenticated %}
<script>
  window.csrfToken = '{{ csrf_token }}';
</script>
<script src="{% static "js/votes.js" %}"></script>
{% else %}
<div id="login-modal" class="reveal-modal"></div>
<script>
$(function () {
  $('#vote, .votes').click(function() {
    $('#login-modal').foundation('reveal', 'open', {
      url: "http://resrc.io{% url "user-login-modal" %}"
    });
  });
});
</script>
{% endif %}
{% endblock last_body %}
